<template>
	<view class="bg">
		<xl-navbar title="分隔提示 标签" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式</view>
			<xl-number v-model="num[0]"></xl-number>
			
			<view class="title">设置形状，限制最小值、最大值</view>
			<xl-number v-model="num[1]" shape="square" :min="-10" :max="10"></xl-number>
			
			<view class="title">样式宽高，字体大小</view>
			<xl-number v-model="num[2]" :width="180" :height="50" :fontSize="14"></xl-number>
			
			<view class="title">显示单位，禁用</view>
			<xl-number v-model="num[3]" showUnit unit="kg" disabled></xl-number>
			
			<view class="title">修改加减间隔大小</view>
			<xl-number v-model="num[4]" :step="1.5"></xl-number>
			
			<view class="title">修改背景颜色</view>
			<xl-number v-model="num[0]" numBackground="#fff" btnBackground="#0a93ff" btnColor="#fff"></xl-number>
			
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const num = ref([1,2,3,4,5,6])
</script>
